<template>
  <div class="Case">
    <Header :zIndex="4" ref="Header"></Header>
    <div class="subDiv">
      <div class="sub-banner">
        <div class="title-box">
          <p class="title">案例中心</p>
          <p class="sub-title">免费的第三方投票制作平台</p>
        </div>
        <img class="banner-img" src="../assets/img/sub-banner-bg.png" alt="" />
      </div>
    </div>
    <div class="container">
      <el-tabs v-model="tabName" :stretch="true" @tab-click="setGroup">
        <el-tab-pane label="全部案例" name="g_0" data-id="0"></el-tab-pane>
        <el-tab-pane v-for="(item, index) in groups" :label="item.name" :data-id="item.id" :name="'g_'+item.id" :key="index"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="case-list list4n" style="overflow:auto" v-infinite-scroll="autoLoad">
      <div class="case-item" v-for="(item, index) in caseData" :key="index">
        <div class="phone-box">
          <img class="case-img" :src="item.cover" alt="" />
          <div class="img-wrap">
            <div class="qrcode-box">
              <vue-qr class="qrcode" :text="'https://wx.jdytp.com/' + item.tempId + '/index.html?act=' + item.shareId" :size="200"></vue-qr>
              <p class="qrcode-tips">扫码查看效果</p>
            </div>
            <!-- 加两个按钮
              <div class="btnbox">
                <div class="btn">预览活动</div>
                <div class="btn" @click="toCreate(item)">创建活动</div>
              </div> -->
          </div>
          <p class="case-title">{{ item.title }}</p>
        </div>
      </div>
    </div>
    <div id="listend" class="listend"></div>
    <Footer></Footer>
  </div>
</template>

<script>
import Ajax from '../../utils/ajax'
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'
import vueQr from 'vue-qr'
import User from '../../utils/user'

export default {
  name: 'Case',
  components: {
    Header,
    Footer,
    vueQr
  },
  data () {
    return {
      page: 1,
      pageSize: 12,
      pageCount: 0,
      group: 0,
      tabName: 'g_0',
      caseData: [],
      groups:[],
      listend: null,
      loading: false
    }
  },
  created () {
    this.setTitle('投票活动案例_网络评选分享');
    this.listend = document.getElementById('listend');
    
    User.saveRef();
    this.getGroupList();
    this.getCaseData();
  },
  mounted(){
    
  },
  methods: {
    // 创建活动
    toCreate(item){
      // console.log(item)
      this.$router.push({path:"/Create",query:{tempId:item.tempId}})
    },
    // 自动加载
    autoLoad(){
      if(this.loading) return;
      if(this.page < this.pageCount) {
        this.setPage(this.page+1);
      }
    },
    // 获取结尾文本
    setEndText(t){
      if(this.listend){
        this.listend.innerText = t;
      }
    },
    // 获取页面
    setPage(n){
      this.page = n;
      this.getCaseData()
    },
    setGroup(item) {
      this.group = parseInt(item.$attrs['data-id']);
      this.page = 1;
      this.caseData = [];
      this.getCaseData()
    },
    // 获取案例分组tabbar
    getGroupList(){
      Ajax.get('example/group').then(res=>{
        if(res.code == 0) {
          this.groups = res.data;
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err=>{
        console.error(err);
        this.$message.error('获取数据失败');
      })
    },
    // 获取案例数据
    getCaseData () {
      if(this.loading) return;
      this.loading = true;
      const that = this;
      Ajax.get('example/list', {
        page: this.page,
        size: this.pageSize,
        group: this.group
      }).then(res => {
        this.setEndText('');
        this.loading = false;
        if (res.code === 0) {
          if(!this.caseData) this.caseData = [];
          this.pageCount = res.data.pageCount;
          if(res.data.data){
            res.data.data.forEach((val, idx, ary)=>{
              that.caseData.push(val);
            });
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err=>{
        this.setEndText('');
        this.loading = false;
        console.error(err);
        this.$message.error('获取数据失败');
      })
    }
  }
}
</script>
<style src="@/assets/css/case.css"  scoped></style>
